import React, { PureComponent, RefObject } from 'react'
import Typed from 'typed.js'
import { getArtList } from '../api/Article'
import { getCategory } from '../api/category'
import { getTags } from '../api/tag'
import Background from '../component/background/background'
import Article from '../component/article'
import dayjs from '../utils/day'

import './main.scss'

import CanvasNest from 'canvas-nest.js'

interface Props {}
interface State {
  arts: Array<any>
  categories: Array<any>
  total: Array<any>
  social: Array<any>
  tags: Array<any>
}

import wave from '../assets/img/wave.svg'

import down from '../assets/img/arrow-down.svg'

export class main extends PureComponent<Props, State> {
  mainRef: RefObject<HTMLDivElement> = React.createRef()

  state = {
    arts: [],
    tags: [],
    categories: [],
    total: [
      {
        title: '文章',
        count: 0,
      },
      {
        title: '评论',
        count: 0,
      },
      {
        title: '分类',
        count: 7,
      },
      {
        title: '博龄',
        count: 0,
      },
    ],
    social: [
      {
        icon: 'https://cdn.jsdelivr.net/gh/Redloney/CDN@1.4/static/img/github.png',
        link: 'https://github.com/Redloney',
        title: 'Github',
      },
      {
        icon: 'https://cdn.jsdelivr.net/gh/Redloney/CDN@1.4/static/img/qq.png',
        link: 'http://wpa.qq.com/msgrd?v=3&uin=67591850&site=qq&menu=yes',
        title: 'QQ',
      },
      {
        icon: 'https://cdn.jsdelivr.net/gh/Redloney/CDN@1.4/static/img/twitter.png',
        link: 'https://steamcommunity.com/profiles/76561198353376109/',
        title: 'steam',
      },
      {
        icon: 'https://cdn.jsdelivr.net/gh/Redloney/CDN@1.4/static/img/bilibili.png',
        link: 'https://space.bilibili.com/263492974',
        title: 'Bilibili',
      },
    ],
  }

  componentDidMount() {
    const config = {
      color: '0,0,0',
      coutn: 100,
      width: '20',
      zIndex: '1',
    }
    const cn = new CanvasNest(document.querySelector('#main'), config)
    let typed = new Typed('.tpyed', {
      strings: ['Hi im redloney', 'wellcome to my page', 'have a great time !'],
      typeSpeed: 60, // 打印速度
      backSpeed: 30,
      cursorChar: '丨',
      showCursor: true,
      startDelay: 300, // 开始之前的延迟300毫秒
      loop: true, // 是否循环
    })
    this.https()
  }

  https = async () => {
    const { tags } = (await getTags()) as any
    const { categories } = (await getCategory()) as any
    const arts: any = await getArtList()
    arts.forEach((el: any) => {
      el.updatedAt = dayjs(el.updatedAt).format('YYYY-MM-DD')
    })

    this.setState({
      tags,
      categories,
      arts,
    })
  }

  render() {
    return (
      <div id="main" className="main" ref={this.mainRef}>
        <Background type="img" wave={true} />
        <div className="banner">
          <div className="banner-wrapper">
            <h2 className="subtitle">Redloneyの小窝</h2>
            <div className="faithful">
              <div className="tpyed"></div>
            </div>
            <div className="start">
              <a href="#content" className="btn">
                <img src={down} alt="down" />
              </a>
            </div>
          </div>
        </div>
        <a id="content"></a>
        <div className="content">
          <div className="left">
            <div className="widget-header">
              <h3 className="widget-title">最新</h3>
              <img src={wave} className="wave" alt="wave" />
            </div>
            <div className="container">
              {this.state.arts.map((el: any) => {
                return <Article key={el._id} {...el} />
              })}
            </div>
          </div>
          {/* <div className="right">
            <section className="widget rounded data">
              <div className="bg-image">
                <a className="author-avatar">
                  <img src="http://q1.qlogo.cn/g?b=qq&nk=67591850&s=100&t=" />
                </a>
              </div>
              <div className="widget-about">
                <div className="widget-author-meta">
                  <a>
                    <span className="nickname">Redloney</span>
                  </a>
                  <div className="desc">Part of journey is the end .</div>
                </div>
                <div className="total">
                  {this.state.total.map((el: any) => {
                    return (
                      <a key={el.title}>
                        <small>{el.count}</small>
                        <span>{el.title}</span>
                      </a>
                    )
                  })}
                </div>
                <hr />
                <div className="social">
                  {this.state.social.map((el: any) => {
                    return (
                      <a href={el.link} target="_blank" key={el.icon}>
                        <img
                          src={el.icon}
                          alt={el.title}
                          title={el.title}
                          className="icon"
                        ></img>
                      </a>
                    )
                  })}
                </div>
              </div>
            </section>
            <section className="widget rounded categories">
              <div className="widget-header">
                <h3 className="widget-title">分类</h3>
                <img src={wave} className="wave" alt="wave" />
              </div>
              <div className="widget-content">
                <ul className="list">
                  {this.state.categories.map((el: any) => {
                    return (
                      <li key={el.label}>
                        <i className="iconfont iconarrow-right"></i>
                        <a>{el.label}</a>
                        <span>{el.count}</span>
                      </li>
                    )
                  })}
                </ul>
              </div>
            </section>
            <section className="widget rounded tags">
              <div className="widget-header">
                <h3 className="widget-title">标签</h3>
                <img src={wave} className="wave" alt="wave" />
              </div>
              <div className="widget-content">
                <ul className="tags">
                  {this.state.tags.map((el: any) => {
                    return (
                      <li key={el._id}>
                        <span>{el.label}</span>
                      </li>
                    )
                  })}
                </ul>
              </div>
            </section>
          </div>  */}
        </div>
      </div>
    )
  }
}

export default main
